import store from '@/store'
export function setDefaultTheme() {
  const defaultTheme = {
    themeContentStyle: {
      background: 'transparent'
    },
    themeTagsViewStyle: {
      'NAVBAR_CONTAINER': { 'background-color': 'transparent' },
      'NAVBAR_ITEM': { 'background-color': '#42b983' }
    },
    themeMyCardStyle: {
      'background-color': 'transparent',
      'width': '100%',
      'margin': '5px 15px 5px 15px',
      'padding': '0px',
      'border': 'none'
    },
    themeNavBarStyle: {
      'background-color': '#304156'
    },
    themeSideBarStyle: {
      'SIDEBAR_CONTAINER': {
        'background-color': '#304156'
      },
      'MENU_BG': {
        'background-color': '#304156'
      }
    },
    themeFormStyle: {
      'FORM_SEARCH': {
        'background-color': 'rgb(242, 242, 242)'
      }
    },
    themeTableHeaderStyle: {
      'background-color': 'transparent'
    }
  }
  store.dispatch('settings/changeSetting', { key: 'themeContentStyle', value: defaultTheme.themeContentStyle })
  store.dispatch('settings/changeSetting', { key: 'themeTagsViewStyle', value: defaultTheme.themeTagsViewStyle })
  store.dispatch('settings/changeSetting', { key: 'themeMyCardStyle', value: defaultTheme.themeMyCardStyle })
  store.dispatch('settings/changeSetting', { key: 'themeNavBarStyle', value: defaultTheme.themeNavBarStyle })
  store.dispatch('settings/changeSetting', { key: 'themeSideBarStyle', value: defaultTheme.themeSideBarStyle })
  store.dispatch('settings/changeSetting', { key: 'themeFormStyle', value: defaultTheme.themeFormStyle })
  store.dispatch('settings/changeSetting', { key: 'themeTableHeaderStyle', value: defaultTheme.themeTableHeaderStyle })
}

export function setImageTheme() {
  const imageTheme = {
    themeContentStyle: {
      'background-image': 'url(\'http://192.168.0.178:81/api/UserBackgroundImage/UserBackgroundImage_022H65HX8VV2VU93.jpg\')',
      'background-size': '100% 100%'
    },
    themeTagsViewStyle: {
      'NAVBAR_CONTAINER': { 'background-color': 'transparent' },
      'NAVBAR_ITEM': { 'background-color': 'transparent', 'border': 'solid rgba(242, 242, 242, 0.43) 1px' }
    },
    themeMyCardStyle: {
      'background-color': 'transparent',
      'width': '100%',
      'margin': '5px 15px 5px 15px',
      'padding': '0px',
      'opacity': '0.9',
      'border': 'none'
    },
    themeNavBarStyle: {
      'background-color': 'transparent'
    },
    themeSideBarStyle: {
      'SIDEBAR_CONTAINER': {
        'background-color': 'rgba(31, 45, 61, 0.43)'
      },
      'MENU_BG': {
        'background-color': 'transparent'
      }
    },
    themeFormStyle: {
      'FORM_SEARCH': {
        'background-color': 'rgba(242, 242, 242, 0.43)'
      }
    },
    themeTableHeaderStyle: {
      'background-color': 'rgba(242, 242, 242, 0.43)'
    }
  }
  store.dispatch('settings/changeSetting', { key: 'themeContentStyle', value: imageTheme.themeContentStyle })
  store.dispatch('settings/changeSetting', { key: 'themeTagsViewStyle', value: imageTheme.themeTagsViewStyle })
  store.dispatch('settings/changeSetting', { key: 'themeMyCardStyle', value: imageTheme.themeMyCardStyle })
  store.dispatch('settings/changeSetting', { key: 'themeNavBarStyle', value: imageTheme.themeNavBarStyle })
  store.dispatch('settings/changeSetting', { key: 'themeSideBarStyle', value: imageTheme.themeSideBarStyle })
  store.dispatch('settings/changeSetting', { key: 'themeFormStyle', value: imageTheme.themeFormStyle })
  store.dispatch('settings/changeSetting', { key: 'themeTableHeaderStyle', value: imageTheme.themeTableHeaderStyle })
}

export function setColorTheme() {
  const colors = store.state.settings.themeDefaultColors.colors
  if (colors) {
    const color1 = colors[0]
    const color2 = colors[1]
    const color3 = colors[2]
    const color4 = colors[3]
    const color5 = colors[4]
    const colorTheme = {
      themeContentStyle: {
        background: color1
      },
      themeTagsViewStyle: {
        'NAVBAR_CONTAINER': { 'background-color': color2 },
        'NAVBAR_ITEM': { 'background-color': color3 }
      },
      themeMyCardStyle: {
        'background-color': 'transparent',
        'width': '100%',
        'margin': '5px 15px 5px 15px',
        'padding': '0px',
        'border': 'none'
      },
      themeNavBarStyle: {
        'background-color': color4
      },
      themeSideBarStyle: {
        'SIDEBAR_CONTAINER': {
          'background-color': color5
        },
        'MENU_BG': {
          'background-color': color5
        }
      },
      themeFormStyle: {
        'FORM_SEARCH': {
          'background-color': color5
        }
      },
      themeTableHeaderStyle: {
        'background-color': color5
      }
    }
    store.dispatch('settings/changeSetting', { key: 'themeContentStyle', value: colorTheme.themeContentStyle })
    store.dispatch('settings/changeSetting', { key: 'themeTagsViewStyle', value: colorTheme.themeTagsViewStyle })
    store.dispatch('settings/changeSetting', { key: 'themeMyCardStyle', value: colorTheme.themeMyCardStyle })
    store.dispatch('settings/changeSetting', { key: 'themeNavBarStyle', value: colorTheme.themeNavBarStyle })
    store.dispatch('settings/changeSetting', { key: 'themeSideBarStyle', value: colorTheme.themeSideBarStyle })
    store.dispatch('settings/changeSetting', { key: 'themeFormStyle', value: colorTheme.themeFormStyle })
    store.dispatch('settings/changeSetting', { key: 'themeTableHeaderStyle', value: colorTheme.themeTableHeaderStyle })
  }
}
